<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="./jquery.js"></script>
        <script>
            $(function() {
                $("#ainput").focus(function() {
                    $(this).removeAttr("value");
                })
                $("input[name='code']").blur(function() {
                    if ($(this).val()){
                        $.post("control.php?action=checkCode", {code: $(this).val()}, function(data) {
                            if (data == 1) {
                                $("span.aspan").removeClass("error").addClass("success").html("很棒哦！输入正确！");
                            } else {
                                $("span.aspan").removeClass("success").addClass("error").html("错了哦！再来一次吧！");
                            }
                        })
                    } else {
                        $(this).val("请输入验证码！")
                    }
                })
            })
        </script>
        <style>
            #atable{
                width: 600px;
                height: 30px;
                border: 1px #D0D0D0 solid;
            }
            #acode{
                width: 80px;
                height: 30px;
                cursor: pointer;
            }
            #ainput{
                height: 22px;
                color: #929292;
                border: 1px #D0D0D0 solid;
            }
            #atd{
                height: 22px;
                line-height: 22px;
            }
            .aspan{
                margin-left: 20px; 
            }
            span.success{
                color: green;                
            }
            span.error{
                color: red;
            }
            a{
                color: #7551E9;
                text-decoration: none;
                font-size: 11px;
                font-family: 微软雅黑;
            }
        </style>
    </head>
    <body>
        <form action="control.php" method="post">
            <table id='atable'>
                <tr>
                    <td width='70'>验证码</td>
                    </head>
                    <td height='35'  width='150'>
                        <input type="text" name="code" id="ainput" value='请输入验证码！'/>
                    </td>
                    <td id='atd'>
                        <img src="./newCodeClass.php"  id="acode"/>        
                        <a href="javascript:void(0);" onclick="document.getElementById('acode').src = 'newCodeClass.php?' + Math.random();">换一换</a>
                        <span class="aspan"></span>
                    </td>
                </tr>
            </table>     
        </form>        
    </body>
</html>
